<template>
  <div class="container box">
    <ul class="myTabs">
      <li v-for="item in tabs" :key="item.key">
        <router-link
          :class="item.key === tabs[1].key ? 'act': ''"
          :to="{ name: item.key }"
        >{{item.tab}}</router-link>
      </li>
    </ul>
    <div class="loginBox">
      <a-form
        :form="form"
        :colon="false"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-row>
          <a-col :span="8">
            <a-form-item label="邮箱">
              <a-input
                v-decorator="['email', {
                  rules: [
                    { required: true, message: '请输入邮箱' },
                    { pattern: this.reg.email.pattern, message: this.reg.email.message }
                  ]
                }]"
                placeholder="请输入邮箱"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="验证码">
              <a-input
                v-decorator="['code', {
                  rules: [
                    { required: true, message: '请输入验证码' },
                    { pattern: this.reg.code.pattern, message: this.reg.code.message }
                  ]
                }]"
                placeholder="请输入验证码"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <div class="svgCaptcha" v-html="svgCaptcha" @click="getSvgCaptcha"></div>
          </a-col>
        </a-row>
        <a-form-item>
          <a-button type="primary" :loading="submitLoading" @click="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-modal
      :visible="visible"
      :footer="null"
      @cancel="successModal"
      :width="340"
    >
      <div class="content">
        <span class="iconBox"><a-icon type="check" /></span>
        <p class="text">密码重设连接邮件发送成功</p>
        <p>已发送至675603402@qq.com</p>
        <a href="http://mail.qq.com" class="goto"><a-button type="primary" shape="round">去邮箱</a-button></a>
        <p>收不到邮件？查看<a href="https://baidu.com/">常见问题</a></p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getCode, forget } from '@/services/login'
import { FORGET_TABS } from '@/utils/const'
import { VCODE_IMG_REGEX, EMAIL_REGEX } from '@/utils/regex.const'

export default {
  data () {
    return {
      form: this.$form.createForm(this, { name: 'forget' }),
      svgCaptcha: '',
      tabs: FORGET_TABS,
      submitLoading: false,
      reg: {
        email: EMAIL_REGEX,
        code: VCODE_IMG_REGEX
      },
      visible: false
    }
  },
  mounted () {
    this.getSvgCaptcha()
  },
  methods: {
    getSvgCaptcha () {
      getCode().then(({ code, data }) => {
        if (code === 200) {
          this.svgCaptcha = data
        }
      })
    },
    submit () {
      this.form.validateFields((err, vals) => {
        if (err) return
        this.submitLoading = true
        forget(vals).then(({ code }) => {
          this.submitLoading = false
          if (code === 200) {
            this.successModal()
          }
        })
      })
    },
    successModal () {
      this.visible = !this.visible
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/scss/variables.scss';

  .content{
    text-align: center;
    p{
      margin-bottom: 0;
    }
    .text{
      font-size: 16px;
      color: $font-deep-color;
      font-weight: 700;
      padding: 16px 0 5px;
    }
    .goto{
      margin: 36px 0 20px;
      display: inline-block;
      ::v-deep .ant-btn{
        height: 48px;
        min-width: 114px;
        font-size: 16px;
      }
    }
  }
  .iconBox{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: $bg-color-base;
    .anticon{
      font-size: 60px;
      color: $font-deep-color;
    }
  }
</style>
